<template>
  <div id="map" class="map"></div>
</template>

<script>
import * as maptalks from 'maptalks';
// const config = {
//   tileGD: "http://www.zyzcgis.xyz/tile/wg/mobile/gaode/",
//   tileGDBZ: 'https://www.zyzcgis.xyz/tile/wg/mobile/gaodeBiaoZhu/',
// }

export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.initMap()
    })
  },
  methods: {
    initMap(){
      this.map = new maptalks.Map('map', {
        scaleControl: {
          position: {
              bottom: 5,
              right: 5
          },
          maxWidth: 100,
          metric: !0
        },
        zoomControl: {
          position: {
              top: 42,
              right: 5
          },
          slider: true,
          zoomLevel: true
        },
        center: [120.200734,36.035998],
        zoom: 14,
        minZoom: 10,
        maxZoom: 19,
        attribution:  true,
        centerCross : true,
        baseLayer: new maptalks.TileLayer('base', {
          urlTemplate: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&z={z}&x={x}&y={y}&scl=1&ltype=11',
          subdomains: ['01', '02', '03', '04']
        }),
        layers: [
          new maptalks.VectorLayer('v'),
        ]
      })
      //   移动地图选择器
      new maptalks.control.Toolbar({
        items: [
          {
            item: "↑",
            click: this.up,
          },
          {
            item: "↓",
            click: this.down,
          },
          {
            item: "←",
            click: this.left,
          },
          {
            item: "→",
            click: this.right,
          },
          {
            item: "标记",
            click: this.toCoordinate,
          },
        ],
      }).addTo(this.map);
    },
    //   上移
    up() {
      this.map.panBy([0, -200]);
    },
    // 下移
    down() {
      this.map.panBy([0, 200]);
    },
    // 左移
    left() {
      this.map.panBy([-200, 0]);
    },
    // 右移
    right() {
      this.map.panBy([200, 0]);
    },
    toCoordinate() {
      var properties = {
        name: '测试01 50km'
      }
      var symbol = {
        markerFile: 'http://106.14.186.44:9999/gps-web/rs/img/map/stts/zfz1/5.png',
        textName: '{name}',
        // markerLineColor: "#f00", //标记颜色
        markerLineWidth: 4, //标记粗细
        markerWidth: 20, //标记宽度
        markerHeight: 20, //标记高度
        textSize: 14,
        textFill: '#000',
      };
      var coordinate = this.map.getCenter().add(0.008, 0.008);
      this.map
        .getLayer("v")
        .clear()
        .addGeometry(new maptalks.Marker(coordinate, {
          properties: properties,
          symbol: symbol
        }));
      this.map.panTo(coordinate);
    },
  },
}
</script>

<style lang="less" scoped>
.map {
  height: 95%;
}
</style>